<template>
  <div>
    <div class="login_container">
      <div class="login_box">
        <!-- <h2 style="text-align: center">博客管理系统</h2> -->
        <!--      头像区域-->
        <div class="avatar_box">
          <img src="" alt="" />
        </div>
        <!-- 登录表单开始 -->
        <el-form
          :model="loginForm"
          :rules="loginFormRules"
          ref="loginFormRef"
          label-width="100px"
          class="login_Form"
          style="margin-top: 100px;"
        >
          <el-form-item label="手机" prop="tel" style="padding: 0 85px 0 0">
            <el-input v-model="loginForm.tel"></el-input>
          </el-form-item>
          <el-form-item
            label="密码"
            prop="password"
            style="padding: 0 85px 0 0"
            
          >
            <el-input v-model="loginForm.password" type="password"></el-input>
          </el-form-item>
          <div class="login_btns">
            <el-button type="primary" @click="login()">登录</el-button>
            <el-button type="info" @click="resetForm('loginFormRef')"
              >重置</el-button
            >
          </div>
        </el-form>
        <!-- 登录表单结束 -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //登录表单
      loginForm: {
        tel: "13749284001",
        password: "admin"
      },
      //登录表单校验
      loginFormRules: {
        tel: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  methods: {
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //登录
    login() {
      console.log("登录");
          this.$http
          .get( "http://localhost:1235/login/login?password="+this.loginForm.password+"&tel="+this.loginForm.tel)
          .then(res => {
            // console.log(res.data)
            if(res.data.code==200){
              this.$router.push("/categories");
            }else{
               this.$message({
              type: 'error',
              message: `登录失败`
            });
            }
          });
      // //校验成功才能登录
      // this.$refs.loginFormRef.validate(async valid => {
      //   if (!valid) return;
    
      //   //  window.sessionStorage.setItem("token", "1111111");
      //   // 2，通过编程式导航跳转到后台主页，路由地址/home
        // this.$router.push("/categories");
      // });
    }
  },
  created() {}
};
</script>
<style scoped>
.login_container {
  height: 100%;
  background-color: #5dbe8a !important;
}
.login_box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  height: 300px;
  background-color: #5dbe8a;
  border-radius: 3px;
}
.avatar_box {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  width: 130px;
  height: 130px;
  border: 1px solid #eee;
  border-radius: 50%;
  box-shadow: 0 0 10px #ddd;
  background-color: #5dbe8a;
}
/* img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eeeeee;
    } */
.login_form {
  margin-top: 150px;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
}

.login_btns {
  display: flex;
  /* 从行首起始位置开始排列 */
  justify-content: flex-end;
  margin-right: 80px;
}
</style>
